<!doctype html>
<html>

	<head>
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
		<title>个人平台即时通讯系统</title>
		
		<!-- jquery核心 js 文件 -->
		<script src="js/jquery/jquery.min2.0.0.js"  type="text/javascript" charset="utf-8"></script>
		
		<!-- socket.io核心 js 文件 -->
		<script src="js/socket/socket.io2.2.0.js" type="text/javascript" charset="utf-8"></script>
		<!-- Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min3.3.7.css"/>
		
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.min3.3.7.css"/>
		
		<!-- Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap/bootstrap.min3.3.7.js" type="text/javascript" charset="utf-8"></script>
		

		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<header>
			<div class="page-header">
				<h1>个人平台即时通讯系统<small>www.baidu.com</small></h1>
			</div>
		</header>
		<section class="row-fluid chat">
			<aside class="chatList col-lg-2">
				<ul class="list-group" id="selectList">
					<li class="list-group-item RoomPublic selectListActive" id="RoomPublic">
						<span class="badge"></span><span class="selectListName">公共聊天室</span>
					</li>
				</ul>
			</aside>
			<section class="col-lg-6 chatRoomBox">
				<ul class="chatRoomList">
					<li class="chatRoom RoomPublic">
						<div class="title">公共聊天室</div>
						<div class="chatMessageBox">
							<ul class="chatMessage">
								<li class='systemInfo_join'>欢迎加入公共聊天室</li>
							</ul>
						</div>
						<div class="chatMessageInputBox">
							<textarea id="txtRoomPublic" class="chatMessageInput" autocomplete="off" onkeydown="if (event.ctrlKey && event.which == 13){emit(this.id);}"></textarea>
							<button class="send btn">发送</button>
							<span class="systemInfoInput">
								Ctrl &nbsp; +&nbsp; Enter
							</span>
						</div>
					</li>
				</ul>
			</section>
		</section>
		<aside>

		</aside>
		<footer>

		</footer>
		<!--模板区域-->
		<div id="temp" class="hide">
			<li>
				<img class="col-lg-1 userAvatar" src="img/dy.png" width="35" height="35" />

				<div class="col-lg-9">
					<div class="label label-success username ">
						其他人发送的
					</div>
					<br />
					<div class="msg">
						其他人发送的
					</div>

				</div>
				<div class="clearfix">

				</div>
			</li>
		</div>
		<div id="MyMessageTemp" class="hide">
			<li>

				<img class="col-lg-1 MyUserAvatar" src="img/dy.png" width="35" height="35" />

				<div class="MyMessage">
					自己发送的
				</div>
				<span class="col-lg-3 MyMessageStatus">正在发送</span>
				<div class="clearfix">

				</div>
			</li>
		</div>
		<div id="selectListTemp" class="hidden">
			<li class="list-group-item">
				<span class="selectListName">测试</span>
				<span class="badge">123</span>
			</li>
		</div>
		<div id="chatRoomTemp" class="hide">
			<li class="chatRoom hide">
				<div class="title">标题</div>
				<div class="chatMessageBox">
					<ul class="chatMessage">
						<!--<li class='systemInfo_join'>欢迎加入公共聊天室</li>-->
					</ul>
				</div>
				<div class="chatMessageInputBox">
					<textarea id="txtRoomPublic" class="chatMessageInput" autocomplete="off" onkeydown="if (event.ctrlKey && event.which == 13){emit(this.id);}"></textarea>
					<button class="send btn">发送</button>
					<span class="systemInfoInput">
						Ctrl &nbsp;&nbsp;&nbsp; +&nbsp;&nbsp;&nbsp; Enter
					</span>
				</div>
			</li>
		</div>
	</body>

</html>